<template>
    <!-- 新增库位 -->
    <el-dialog v-model="isShow" title="新增货架库位码" width="527">
        <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="120px" class="demo-ruleForm">
            <el-form-item label="货架类型" prop="shelvesType">
                <el-select v-model="formData.shelvesType" placeholder="请选择货架类型">
                    <el-option v-for="item in hm_stock_shelves_type" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="楼层" :prop="treeValue.length < 1 ? 'floor' : ''">
                <el-input-number v-if="treeValue.length < 1" v-model="formData.floor" min="1" max="99" />
                <div v-else>{{ formData.floorName }}</div>
            </el-form-item>
            <!-- <el-form-item label="区域" :prop="treeValue.length < 2 ? 'area' : ''">
                <el-input-number v-if="treeValue.length < 2" v-model="formData.area" min="1" max="99" />
                <div v-else>{{ formData.areaName }}</div>
            </el-form-item> -->
            <el-form-item label="所在排" :prop="treeValue.length < 3 ? 'row' : ''">
                <el-input-number v-if="treeValue.length < 3" v-model="formData.row" min="1" max="99" />
                <div v-else>{{ formData.rowName }}</div>
            </el-form-item>
            <el-form-item label="货架数" prop="shelves">
                <el-input-number v-model="formData.shelves" min="1" max="99" />
            </el-form-item>
            <el-form-item v-if="formData.shelvesType === 'C01'" label="层数量" prop="layer">
                <el-input-number v-model="formData.layer" min="1" max="99" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch v-model="formData.status" :active-value="1" :inactive-value="2" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                <el-button type="primary" v-loading="loading" @click="submitForm(ruleFormRef)">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, defineExpose, defineEmits } from 'vue'
import { stockLocationGenerate } from '@/api/depot/index'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { hm_stock_shelves_type } = toRefs<any>(proxy?.useDict('hm_stock_shelves_type'));
const emit = defineEmits(['getList'])

const loading = ref(false)
const isShow = ref(false)
const treeValue = ref<Array<any>>([])
const ruleFormRef = ref()
const formData = ref<any>({
    shelvesType: '',    // 货架
    locationId: '',     // 库位id
    floor: 1,           // 楼
    floorName: '',
    // area: 1,            // 区域
    // areaName: '',
    row: 1,             // 排
    rowName: '',
    shelves: 1,         // 货架
    layer: 1,           // 层
    status: 1           // 状态
})

const int = (data: Array<any>) => {
    treeValue.value = data
    isShow.value = true
    data.forEach(item => {
        if (item.type == '1') {
            formData.value.floorName = item.name || 1
        }
        // if (item.type == '2') {
        //     formData.value.areaName = item.name || 1
        // }
        if (item.type == '3') {
            formData.value.rowName = item.name || 1
        }
    })
    formData.value.locationId = data[data.length - 1]?.locationId
}
// 表单验证
const validatePass = (rule: any, value: string, callback: Function) => {
    if (value) {
        return /^([1-9]|[1-9]\d)$/.test(value)
    } else {
        callback()
    }
}
const rules = reactive({
    shelvesType: [
        {
            required: true,
            message: '请选择货架类型',
            trigger: 'change',
        }
    ],
    floor: [
        {
            required: true,
            message: '请输入楼层数量',
            trigger: 'change',
        }, {
            validator: validatePass,
            message: '请输入1-99的整数',
            trigger: 'change'
        }
    ],
    // area: [
    //     {
    //         required: true,
    //         message: '请输入区域数量',
    //         trigger: 'change',
    //     }, {
    //         validator: validatePass,
    //         message: '请输入1-99的整数',
    //         trigger: 'change'
    //     }
    // ],
    row: [
        {
            required: true,
            message: '请输入排数量',
            trigger: 'change',
        }, {
            validator: validatePass,
            message: '请输入1-99的整数',
            trigger: 'change'
        }
    ],
    shelves: [
        {
            required: true,
            message: '请输入货架数量',
            trigger: 'change',
        }, {
            validator: validatePass,
            message: '请输入1-99的整数',
            trigger: 'change'
        }
    ],
    layer: [
        {
            required: true,
            message: '请输入层数量',
            trigger: 'change',
        }, {
            validator: validatePass,
            message: '请输入1-99的整数',
            trigger: 'change'
        }
    ],
})

// { validator: validatePass, message: '请选择货架类型', trigger: 'blur' }

const submitForm = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            apiExecute(formEl)
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 重置
const resetForm = (formEl: any) => {
    if (!formEl) return
    formData.value = {
        shelvesType: '',    // 货架
        locationId: '',     // 库位id
        floor: 1,           // 楼
        floorName: '',
        // area: 1,            // 区域
        // areaName: '',
        row: 1,             // 排
        rowName: '',
        shelves: 1,         // 货架
        layer: 1,           // 层
        status: 1           // 状态
    }
    isShow.value = false
}

// 接口请求
const apiExecute = async (formEl: any) => {
    loading.value = true
    try {
        const { code = 200 } = await stockLocationGenerate(formData.value)
        loading.value = false
        if (code == 200) {
            ElMessage({
                message: '新增库位码成功',
                type: 'success',
            })
            emit('getList')
            resetForm(formEl)
        } else {
            ElMessage({
                message: '新增库位码失败',
                type: 'error',
            })
        }
    } catch (error) {
        loading.value = false
    }
}

defineExpose({ int, isShow })

</script>
<style lang="scss" scoped>
@import url(../style/index.scss);
</style>